import Taro, { Component } from '@tarojs/taro'
import { View , Text , Image} from '@tarojs/components';
import { baseImgSrc } from '../../util/base_url';
import { AtRate , AtButton , AtTextarea , AtMessage } from 'taro-ui';
import { getOrderDtl , confirmOrder, evalOrder , cancleOrder , waitCancleOrder , wochufa } from '../../util/api';
import { getRole } from '../../util/globaldata';
import { navigateMap } from '../../util/util';
import './orderdtl.scss';
export default class OrderDtl extends Component{
    constructor(){
        super(...arguments)
        this.state = {
            id:"",
            type:"",
            value:"",
            star:5,
            info:"",
            status:"",
            userRole:1,
        }
    }
    config = {
        navigationBarTitleText:this.state.type == 1 ? '进行中详情' : '已完成详情'
    }
    handleChange(value){
        this.setState({ value })
    }
    onStarChange(state,value){
        if(state){
            this.setState({star:value})
        }
    }
    componentWillMount(){
        let { id , type } = this.$router.params;
        this.setState({id,type},() => {
            this.getDtl(1)
        })
    }
    getDtl(reqType = 1){ //1第一次  2是第二次轮训
        let { id , type , status } = this.state;
        getOrderDtl({type,id},reqType == 2).then( res => {
            if(res.code == 0){
                if(reqType == 2){
                    if(status == res.data.status){

                    }else{
                        this.setState({info:res.data,status:res.data.status,star:res.data.xing,value:res.data.user_cont ? res.data.user_cont : "", userRole:res.data.own_role == 1 ? 1 : 2});
                    }
                }else{
                    this.setState({info:res.data,status:res.data.status,star:res.data.xing,value:res.data.user_cont ? res.data.user_cont : "", userRole:res.data.own_role == 1 ? 1 : 2});
                }
            }
            reqType == 1 ? this.eventLoopStart() : "";
        })
    }
    //打电话
    callPhone(phoneNumber){
        Taro.makePhoneCall({ phoneNumber })
    }
    //完成订单
    confirmOrder(id){
        Taro.showModal({
            title:"提示",
            content:"确定完成订单吗",
        }).then( res => {
            if(res.confirm){
                confirmOrder({id}).then( res => {
                    if(res.code == 0){
                        Taro.showToast({title:res.msg});
                        Taro.eventCenter.trigger('refreshOrderList')
                        this.getDtl();
                    }else{
                        Taro.showModal({
                            title:"提示",
                            content:res.msg
                        })
                    }
                })
            }
        })
    }
    //评价订单
    evalOrder(){
        let { star , value , id } = this.state; 
        if(!value){
            Taro.atMessage({
                'message':"请输入评价内容",
                'type':'error',
            })
            return false
        }
        evalOrder({star,user_cont:value,id}).then(res => {
            if(res.code == 0){
                Taro.showToast({title:res.msg});
                Taro.eventCenter.trigger('refreshOrderList')
                Taro.redirectTo({
                    url:"/pages/suggest/suggest"
                })
            }else{
                Taro.showModal({
                    title:"提示",
                    content:res.msg
                })
            }
        })
    }
    //取消订单
    cancleOrder(){
        Taro.showModal({
            title:"提示",
            content:"确认取消订单吗"
        }).then( res => {
            if(res.confirm){
                let { id } = this.state; 
                cancleOrder({id}).then( res => {
                    if(res.code == 0){
                        Taro.showToast({title:res.msg,icon:"none"});
                        Taro.eventCenter.trigger('refreshOrderList')
                        setTimeout(() => {
                            Taro.navigateBack();
                        },200)
                    }else{
                        Taro.showModal({
                            title:"提示",
                            content:res.msg
                        })
                    }
                })
            }
        })
    }
    waitCancleOrder(){
        Taro.showModal({
            title:"提示",
            content:"确认取消订单吗"
        }).then( res => {
            if(res.confirm){
                let { id } = this.state; 
                waitCancleOrder({id}).then( res => {
                    if(res.code == 0){
                        Taro.showToast({title:res.msg,icon:"none"});
                        Taro.eventCenter.trigger('refreshOrderList')
                        setTimeout(() => {
                            Taro.navigateBack();
                        },200)
                    }else{
                        Taro.showModal({title:"提示",content:res.msg})
                    }
                })
            }
        })
    }
    nMap(){
        if(this.state.type != 4){
            navigateMap(...arguments)
        }
    }
    toCommentList(id){
        Taro.navigateTo({
            url:"/pages/commentList/commentList?id="+id
        })
    }
    wochufa(){
        let { id , info } = this.state; 
        let currentTimp = Math.floor(new Date().valueOf() / 1000); //当前秒
        if(currentTimp < info.start_times){
            Taro.showModal({
                title:"提示",
                content:"未到出发时间确认行程开始吗？",
            }).then( res => {
                if(res.confirm){
                    wochufa({id}).then( res => {
                        if(res.code == 0){
                            Taro.showToast({title:res.msg});
                            Taro.eventCenter.trigger('refreshOrderList');
                            this.getDtl();
                        }else{
                            Taro.showToast({title:res.msg})
                        }
                    })
                }
            })
        }else{
            wochufa({id}).then( res => {
                if(res.code == 0){
                    Taro.showToast({title:res.msg});
                    Taro.eventCenter.trigger('refreshOrderList');
                    this.getDtl();
                }else{
                    Taro.showToast({title:res.msg})
                }
            })
        }
        
    }
    eventLoopStart(){ //列表轮训开始
        clearInterval(this.timp)
        this.timp = setInterval(() => {
            this.getDtl(2);
        },1000 * 10)
    }
    rnBtns(){
        let { status , userRole , id }  = this.state;
        let btn1 = {parentClass:'flex align-items space-between',children:[
                    {txtName:"完成订单",eventName:"confirmOrder",className:"width50-btn1"},
                    {txtName:"取消订单",eventName:"cancleOrder",className:"width50-btn2"}]}
        let btn2 = {parentClass:'fn-ctr',children:[{txtName:"评价订单",eventName:"evalOrder",className:"next-btn"}]};
        let btn3 = {parentClass:'fn-ctr',children:[{txtName:"完成订单",eventName:"confirmOrder",className:"next-btn"}]};
        let btn4 = {parentClass:'fn-ctr',children:[{txtName:"取消订单",eventName:"cancleOrder",className:"next-btn"}]};
        let btn5 = {parentClass:'fn-ctr',children:[{txtName:"取消订单",eventName:"waitCancleOrder",className:"next-btn"}]};
        let btn6 = {parentClass:'fn-ctr',children:[{txtName:"开始行程",eventName:"wochufa",className:"next-btn"}]};
        let btnList = {children:[]};
        if(userRole == 1){ //车主
            switch(status){
                case 0:
                    btnList = btn5;
                    break;
                case 1 :
                    btnList = btn3;
                break;
                case 3:
                    btnList = btn2;
                break;
                case 5:
                    btnList = btn4;
                break;
            }
        }else{   //司机
            switch(status){
                case 0:
                    btnList = btn5;
                    break;
                case 1 :
                    btnList = btn3;
                break;
                case 3:
                    btnList = btn2;
                break;
                case 5:
                    btnList = btn6;
                break;
            }
        }
        return (
            <View className={btnList.parentClass}>
                {
                    btnList.children.map( v => (
                        <AtButton className={v.className} type='primary' size='normal' onClick={this[v.eventName].bind(this,id)}>{v.txtName}</AtButton>
                    ))
                }
            </View>
        )
    }
    rnEvalBox(){
        let { status , userRole , star , value , info} = this.state;
        return (
            <View className='evbox'>
                {/* info.other_cont ? (
                    <View className='eval'>
                        <View className='title'>{userRole == 1 ? '司机对您评论' : '车主对您的评论'}</View>
                        <View className='eval-shang flex align-items flex-start'>
                            <AtRate value={info.other_xing} size={20} margin={15} />
                        </View>
                        <AtTextarea
                            value={info.other_cont}
                            disabled={true}
                            count={false}
                        />
                    </View>
                ) : "" */}
                {
                    status == 3 || status == 4 ? (
                        <View className='eval'>
                            <View className='title'>对本次行程满意吗（匿名）</View>
                            <View className='eval-shang flex align-items flex-start'>
                                <AtRate value={star} size={20} margin={15} onChange={this.onStarChange.bind(this,status == 3)} />
                            </View>
                            <AtTextarea
                                value={value}
                                onChange={this.handleChange.bind(this)}
                                disabled={status == 4}
                                placeholder='想说点什么？'
                                count={false}
                            />
                        </View>
                    ) : ''
                }
            </View>
        )
    }
    render(){
        let { info , userRole} = this.state;
        return (
            <View className='confirmorder'>
                <View className='address'>
                    <View className='ot-item flex align-items space-between ot-first' onClick={this.nMap.bind(this,info.lat,info.lon,info.address,'')}>
                        <Image className='left' src={`${baseImgSrc}/address_fa.png`} />
                        <View className='right flex1'>{info.address}</View>
                        {
                            type != 4 ? ( <Image className='map_icon' src={`${baseImgSrc}/tx_map.png`} />) : ""
                        }
                    </View>
                    <View className='ot-item flex align-items space-between' onClick={this.nMap.bind(this,info.go_lat,info.go_lon,info.go_address,'')}>
                        <Image className='left' src={`${baseImgSrc}/address_dao.png`} />
                        <View className='right flex1'>{info.go_address}</View>
                        {
                            type != 4 ? ( <Image className='map_icon' src={`${baseImgSrc}/tx_map.png`} />) : ""
                        }
                    </View>
                </View>
                <View className='info-card'>
                    <View className='beizhu flex align-items flex-start'>
                        <Text className='beizhu-txt'>出发时间：</Text>
                        <Text classNames='beizhu-dang'>{info.start_time}</Text>
                    </View>
                    <View className='beizhu flex align-items flex-start'>
                        <Text className='beizhu-txt'>备注：</Text>
                        <Text classNames='beizhu-dang'>{info.is_dang}</Text>
                    </View>
                </View>
                <View className='orderinfo'>
                    <View className='item  flex align-items flex-start'>
                        <Text className='item-txt1'>订单编号：</Text>
                        <Text className='item-txt2'>{info.order}</Text>
                    </View>
                    <View className='item  flex align-items flex-start'>
                        <Text className='item-txt1'>下单时间：</Text>
                        <Text className='item-txt2'>{info.pay_time}</Text>
                    </View>
                    {
                        info.accept_time == null ? "" :(
                            <View className='item  flex align-items flex-start'>
                                <Text className='item-txt1'>行程时间：</Text>
                                <Text className='item-txt2'>{info.accept_time}</Text>
                            </View>
                        )
                    }
                    {
                        info.finish_time == null ? "" : (
                            <View className='item last flex align-items flex-start'>
                                <Text className='item-txt1'>完成时间：</Text>
                                <Text className='item-txt2'>{info.finish_time}</Text>
                            </View>
                        )
                    }
                </View>
                {
                    this.state.status == 0 ? '' : (
                        <View className='driver-card '>
                            <View className='top flex align-items space-between' onClick={this.toCommentList.bind(this,info.user_id)}>
                                <View className='left'>
                                    <Image className='left-pic' src={info.headimg} />
                                </View>
                                <View className='flex1 right flex flex-wrap align-content-around'>
                                    <View className='name flex align-items flex-start'>
                                        <Text className='name-txt'>{info.nickname}</Text>
                                        <View className='yanzheng fn-ctr'>已通过人脸识别</View>
                                    </View>
                                    <View className='name flex space-between flex-start'>
                                        <AtRate value={5} size={15} />
                                        <Text className='dance-taxt'>{(userRole == 1 ? "已接单" : "已出行") + info.counts}次</Text>
                                    </View>
                                </View>
                            </View>
                            {
                                info.is_end == 0  ? (
                                    <View className='opt flex align-items flex-start'>
                                        {/* <View className='item fn-ctr'>
                                            <Image className='item-img' src={`${baseImgSrc}/chat.png`} />
                                            <Text className='item-txt'>聊一聊</Text>
                                        </View> */}
                                        <View className='item fn-ctr'>
                                            <Image className='item-img'  src={`${baseImgSrc}/phone.png`} />
                                            <Text className='item-txt' onClick={this.callPhone.bind(this,info.phone)}>联系他</Text>
                                        </View>
                                    </View>
                                ) : ""
                            }
                        </View>
                    )
                }
                
                {
                  this.rnEvalBox()                
                }
                {
                   this.rnBtns()
                }
                <AtMessage />
            </View>
        )
    }
}